<template>
  <div class="bg-edit">
    <el-dialog title="编辑" :visible.sync="editDialogVisible" width="60%"
    :modal-append-to-body="false"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false">
      <el-form :model="bgEditForm" ref="bgEditForm" label-width="80px" class="bg-edit-form">
        <div class="item-info">
            <el-form-item label="名称">
              <el-input :value="bgEditForm.name" placeholder="请输入内容"></el-input>
            </el-form-item>
            <el-form-item label="上线时间" class="time-item"
            prop="timeRange"
            :rules="[{ required: true, message: '请选择时间', trigger: 'change' }]"
            >
                <el-date-picker
                v-model="bgEditForm.timeRange"
                :picker-options="pickerOptions"
                type="datetimerange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item class="edit-btn">
                <el-button style="background: #4065E0; color: #fff" @click="define('bgEditForm')">保存</el-button>
                <el-button style="background: #EEEEEE; color: #333333" @click="cancel">取消</el-button>
                <!-- 背景详情的值考虑是否存在vuex中 -->
            </el-form-item>
        </div>
        <div class="item-img">
           <el-form-item class="img-form-item">
                <img :src="imgUrl" alt="">
                <p>1920px*1080px</p>
          </el-form-item>
          
        </div>
          
      </el-form>
      
    </el-dialog>
  </div>
</template>

<script>
import { editBackground } from 'api/backgroundController/backgroundController'
export default {
  name: "Edit",
  props: {
    item: {
      type: Object,
      default: {}
    },
    moduleId: {
      type: Number
    },
    appId: {
      type: String
    }
  },
  data() {
    return {
      editDialogVisible: true,
      bgEditForm: {
          name: this.item.name,
          timeRange: []
      },
      pickerOptions: {
        disabledDate: (time) => {
            return time.getTime() < Date.now()
          }
      }
    };
  },
  computed: {
    imgUrl: function(){
      return this.item.image
    },
    startTime: function(){
      return new Date(this.item.startTime)
    },
    endTime: function(){
      return new Date(this.item.endTime)
    }
  },
  methods: {
    cancel() {
        this.$emit("closeDialog", false);
    },
    define(formName){
        // this.$emit("closeDialog", false);
        this.$refs[formName].validate(valid => {
          if(valid){
            
            // 请求接口，拿到预设的时间传给后台
            var params = {
              name: this.bgEditForm.name,
              image: this.imgUrl,
              appId: this.appId,
              moduleId: this.moduleId,
              startTime: new Date(this.bgEditForm.timeRange[0]).toISOString(),
              endTime: new Date(this.bgEditForm.timeRange[1]).toISOString()
            }
            editBackground(params, this.item.bgId).then(res => {
              if(res.resultCode == 1){
                this.$message.success(res.resultMsg)
                this.$emit("closeDialog", false);
              }else{
                this.$message.error(res.res.resultMsg)
              }
            })
            .catch(res => this.$message.error('保存失败'))
          }else{
            return false
          }
      })
    },
    
  },
  created(){
    this.bgEditForm.timeRange.push(this.startTime, this.endTime)
  }
};
</script>

<style lang="scss" scoped>
.bg-edit {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  .bg-edit-form{
      display: flex;
      justify-content: space-around;
      .item-info{
          flex: 1;
          width: 436px;
          .time-item{
            margin-top: 50px;
          }
          .edit-btn{
              margin-top: 200px;
          }
      }
      .item-img{
          flex: 1;
              img{
                  width: 100%;
                  height: 90%;
              }
              p{
                position: absolute;
                bottom: 0;
                right: 0;
              }
      }
  }
 
  .el-button{
      width: 100px;
  }
  .el-button+.el-button{
      margin-left: 30px;
  }
}

</style>
